{extend name="public/base" /}
{block name="content"}
<div class='weui-content'>
    <!-- 轮播图 -->
    <div class="swiper-container swiper-banner">
        <div class="swiper-wrapper">
            {foreach name="thumbList" item="vo"}
                <div class="swiper-slide"><a href="{$vo.link_url}" target="_blank"><img src="{$vo.thumb}"
                                                                                        alt="{$vo.remark}"/></a></div>
            {/foreach}
        </div>
        <div class="swiper-pagination"></div>
    </div>

    <!-- 快捷功能图标 -->
    <div class="weui-flex wy-iconlist-box">
        <div class="weui-flex__item">
            <a href="{$customer_link}" class="wy-links-iconlist">
                <div class="img"><img src="/static/index/images/customer.png" alt="客服中心"></div>
                <p>客服中心</p>
            </a>
        </div>
        <div class="weui-flex__item">
            <a href="{:config("global.APP_DOWNLOAD_URL")}" class="wy-links-iconlist">
                <div class="img img-download"><img src="/static/index/images/download.png" alt="下载APP"></div>
                <p>下载APP</p>
            </a>
        </div>
        <div class="weui-flex__item">
            <a href="/invite.html" class="wy-links-iconlist">
                <div class="img img-service"><img src="/static/index/images/tuiguang.png" alt="我的推广"></div>
                <p>我的推广</p>
            </a>
        </div>
        <div class="weui-flex__item">
            <a href="/letter-list.html" class="wy-links-iconlist">
                <div class="img img-about"><img src="/static/index/images/letter.png" alt="关于我们"></div>
                <p>站内信</p>
            </a>
        </div>
    </div>

    <!-- 通知区域 -->
    <div class="wy-ind-news">
        <i class="news-icon-laba"></i>
        <div class="swiper-container swiper-news">
            <div class="swiper-wrapper">
                {foreach name="noticeList" item="vo"}
                    <div class="swiper-slide"><a href="/notice-detail/{$vo.id}">{$vo.title}</a></div>
                {/foreach}
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <a href="/notice-list" class="newsmore"><i class="fa fa-angle-right news-icon-more"></i></a>
    </div>
    <div class="wy-Module">
        <div class="wy-Module-tit">
            <span>精选推荐</span>
            <div class="stock-header table-row">
                <div class="header-name table-cell">名称</div>
                <div class="header-price table-cell">价格(USDT)</div>
                <div class="header-change table-cell">涨跌幅</div>
            </div>
        </div>
        <div class="wy-Module-con">
            <ul class="stock-list">
                {foreach name="marketList" item="vo"}
                    <li class="table-row down">
                        <a href="/trade/{$vo.code}.html" class="stock-link {$vo.code}" data-code="{$vo.code}">
                            <div class="stock-info table-cell">
                                <div class="stock-name">
                                    <img src="{$vo.icon}" class="stock-icon" alt="{$vo.code}">
                                    {$vo.code}
                                </div>
                                <div class="stock-volume">/usdt</div>
                            </div>
                            <div class="stock-price-wrap table-cell">
                                <span class="stock-price">{$vo.close|h_format_large_number}</span>
                            </div>
                            <div class="stock-change-wrap table-cell">
                                {if $vo.change < 0}
                                    <span class="stock-change up">{$vo.change}%</span>
                                {else /}
                                    <span class="stock-change down">+{$vo.change}%</span>
                                {/if}
                            </div>
                        </a>
                    </li>
                {/foreach}

            </ul>
        </div>
    </div>
    <footer class="wy-footer">
        <a href="javascript:void(0);" class="footer-nav active">
            <i class="fa fa-home"></i>
            <span>首页</span>
        </a>
        <a href="/list.html" class="footer-nav">
            <i class="fa fa-line-chart"></i>
            <span>行情</span>
        </a>
        <a href="/asset.html" class="footer-nav">
            <i class="fa fa-cube"></i>
            <span>资产</span>
        </a>
        <a href="/member.html" class="footer-nav">
            <i class="fa fa-user"></i>
            <span>我的</span>
        </a>
    </footer>
{/block}
{block name="script"}
    <script src="/static/index/js/swiper.js"></script>
    <script>

        $(function () {
            var bannerSwiper = new Swiper('.swiper-banner', {
                autoplay: true,
                pagination: {
                    el: '.swiper-pagination'
                }
            });
            // 通知滚动
            var newsSwiper = new Swiper('.swiper-news', {
                autoplay: true,
                delay: 5000,
                direction: 'vertical'
            });
        })
    </script>

    <script>
        let webSocket = null;
        let isConnect = false; // 连接状态标志位
        let rec = null; // 用于存储延迟重连的定时器
        const marketList =JSON.parse('{$marketList|raw|json_encode}');
        const code = marketList.map(function (item){
            return item.code;
        });
        console.log(code);
        createWebSocket()

        function createWebSocket() {
            try {
                const wsUri = 'ws://127.0.0.1:8082'; // WebSocket服务器地址
                webSocket = new WebSocket(wsUri);
                initWebSocket();
            } catch (e) {
                console.log('尝试创建连接失败' + e);
                reConnect(); // 创建连接失败时触发重连
            }
        }

        function initWebSocket() {
            webSocket.onopen = function (e) {
                console.log('WebSocket连接已打开');
                isConnect = true; // 更新连接状态标志位
                webSocket.send(JSON.stringify({
                    "type": "init",
                    "data": code
                }));
                // 可以在这里启动心跳检测等逻辑...
            };
            webSocket.onclose = function (e) {
                console.log('WebSocket连接已关闭');
                isConnect = false; // 更新连接状态标志位
                reConnect(); // 连接关闭时触发重连
            };
            webSocket.onmessage = function (e) {
                // 处理接收到的消息...
                data = JSON.parse(e.data)
                if (data["type"]=="pong") {
                    webSocket.send(JSON.stringify({
                        "type": "ping"
                    }));
                }
                if (data["type"] == "market") {
                    $.each(data["data"], function (key, v) {
                       var val = v;
                        symbol = val["code"];
                        close = val["close"];
                        change = val["change"];
                        obj = $("." + symbol);
                        obj.find(".stock-price").text(close);
                        obj.find(".stock-change").removeClass("up").removeClass("down");
                        obj.find(".stock-change").text(change + "%");
                        if (change < 0) {
                            obj.find(".stock-change").addClass("up");
                            obj.find(".stock-change").text(change + "%");
                        } else {
                            obj.find(".stock-change").addClass("down");
                            obj.find(".stock-change").text("+"+change + "%");
                        }
                    })
                }
            };
            webSocket.onerror = function (e) {
                console.log('WebSocket连接发生错误');
                isConnect = false; // 更新连接状态标志位
                reConnect(); // 连接错误时触发重连
            };
        }

        function reConnect() {
            if (isConnect) return; // 如果已经连接上则不再重连
            if (rec) clearTimeout(rec); // 清除之前的重连定时器（如果存在）
            rec = setTimeout(function () {
                createWebSocket(); // 延迟一段时间后尝试重新建立连接
            }, 5000); // 设置延迟时间为5秒（可根据实际需求调整）
        }
    </script>

{/block}